// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.beatmapset-info {
  @_top: beatmapset-info;
  @min-height: 200px;
  @max-height: 300px;
  @box-margin--top: 15px;

  font-size: @font-size--normal;

  display: grid;
  gap: 20px;

  padding: 10px @gutter-beatmapset 0;
  background-color: hsl(var(--hsl-b4));
  -webkit-overflow-scrolling: touch;

  @media @desktop {
    padding: 15px @gutter-beatmapset-desktop 0;
    grid-template-columns: 1fr 175px @beatmapset-float-box-width;
  }

  &__box {
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 10px;

    @media @desktop {
      min-height: @min-height;
      max-height: @max-height;
    }
  }

  &__edit-button {
    position: absolute;
    top: 5px;
    right: 0;

    opacity: 0;
    transition: opacity 120ms;
    z-index: 1; // place above sibling elements

    .@{_top}__box:hover & {
      opacity: 1;
    }
  }

  &__row {
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;

    &--half {
      flex-direction: row;
    }
  }

  &__half-entry {
    flex: none;
    width: 50%;
  }

  &__header {
    font-size: @font-size--title-small;
    font-weight: bold;
    font-style: normal;
    padding: 5px 0;
    margin: 0;

    &--sticky {
      position: sticky;
      top: 0;
      z-index: 1; // render above imagemaps
      background-image: linear-gradient(
        to top,
        hsla(var(--hsl-b4), 0),
        hsl(var(--hsl-b4)) 5px
      );
    }
  }

  &__link {
    overflow-wrap: break-word;
  }

  &__scrollable {
    overflow-y: auto;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 10px;
      background-image: linear-gradient(
        to bottom,
        hsla(var(--hsl-b4), 0),
        hsl(var(--hsl-b4))
      );
      pointer-events: none;
    }
  }
}
